<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vditor Markdown 编辑器</title>
    <!-- 引入 Vditor 的 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.9.1/dist/index.css" />
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }
        .container {
            max-width: 800px;
            margin: 30px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Vditor Markdown 编辑器</h1>
        <!-- 用于初始化 Vditor 的容器 -->
        <div id="vditor"></div>
    </div>

    <!-- 引入 Vditor 的 JS -->
    <script src="https://cdn.jsdelivr.net/npm/vditor@3.9.1/dist/index.min.js"></script>
    <script>
        // 初始化 Vditor
        const vditor = new Vditor('vditor', {
            height: 500, // 设置编辑器的高度
            cache: {
                enable: false // 禁用缓存
            },
            toolbar: [
                'emoji', 'undo', 'redo', 'bold', 'italic', 'strike', 'link', 'quote', 'list', 'ordered-list', 'check', 'code', 'image', 'table', 'line', 'headings', 'outdent', 'indent', 'preview', 'fullscreen'
            ],
            preview: {
                delay: 500, // 延迟渲染
                mode: 'live', // 实时预览模式
            },
            editor: {
                theme: 'light', // 编辑器主题：light / dark
                // 这里设置的配置会影响编辑器本身的功能
                spellcheck: true, // 启用拼写检查
                hotkey: {
                    save: 'Ctrl+S', // 保存快捷键
                }
            },
            // 初始化时加载Markdown内容，可以设置为null或者为空字符串
            value: '# 欢迎使用 Vditor\n这是一个Markdown编辑器。',
        });
    </script>

</body>
</html>
